<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子元素水平居中-绝对定位</title>
    <style>
        .box1 {
            width: 600px;
            height: 600px;
            background-color: #bfa;
        }
        .box2 {
            width: 500px;
            height: 500px;
            background-color: yellow;
            position: absolute;
            top: 100px;
        }
        .box3 {
            width: 100px;
            height: 100px;
            background-color: orange;

            position: absolute;
            margin-left: auto;
            margin-right: auto;
            left: 0px;
            right: 0px;
        }
        /*
        绝对定位 总结：
            1. 子元素开启绝对定位，其父元素必须开启定位，否则会把根元素作为其包含块
            2. margin-left和margin-right设置为auto，且left和right设置为0；相比较相对定位而言，为什么要增加left和right？
                原因是水平布局要满足下面的等式，如果left和right也设置为auto，则等式无法满足
                包含块内容区宽度 = left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right;
        */
    </style>
</head>
<body>
<div class="box1">
    <div class="box2">
        <div class="box3"></div>
    </div>
</div>
</body>
</html>